<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基于mvvm模型的数据双向绑定机制的理解</title>
</head>
<body>
<!--mvvm模型的view部分-->
<div id="app1">
    本节课专题内容：{{message}}
    <br>
    课题内容： <input type="text" v-model="message" id="userName">
    <br>
    <button v-on:click="showMe">修改值</button>
    <br>
    <form>
        用户名：<input type="text" v-model="formQueryData.username">
        电话：<input type="text" v-model="formQueryData.usertel">
    </form>
    <button v-on:click="doQuery">查询</button>
    <br>
    查询显示结果：
    <br>
    <div v-for="eachRow in queryList">
        {{ eachRow.username }} {{eachRow.usertel}}
    </div>
</div>

<div id="app2">

</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<!--本地vue库文件-->
<script type="text/javascript" src="vue-v2.6.14/vue.min.js"></script>
<!--使用axios第三方的组件进行一步查询操作，完成ajax请求处理，当然可以使用jquery实现，此处使用 axios 组件-->
<script type="text/javascript" src="axios-0.21.1/axios.min.js"></script>

<script type="text/javascript">
    // vue对象和html代码的 #app1 区域进行绑定
    var vue = new Vue({
        el: "#app1", // 用于和html进行绑定处理
        // mvvm模型的vm部分，视图模型部分中的数据模型
        // 视图模型中的数据模型中的数据结构的描述
        data: {
            // 定义数据模型中的一个数据变量
            message: '基于mvvm的vue框架的数据双向绑定理解',
            // 查询条件form表单数据模型
            formQueryData: {
                // 用户名
                username: '',
                // 电话
                usertel: ''
            },
            // 查询结果的数据集
            queryList: [],
        },
        // mvvm模型的modal部分，主要是进行业务逻辑处理和异步请求
        // modal模型中的业务逻辑处理方法，在methods中会通过异步请求完成和后台系统的数据交互，进而操作数据库接口
        methods: {
            // modal的行为方法
            showMe() {
                this.message = "这里是通过点击事件修改的值。。。。"
            },
            doQuery(){
                // 发送ajax进行异步查询操作
                // 保存this对象的引用
                let _this = this
                axios.post('UserinfoQuery',this.formQueryData).then(function(res){ // then里面匿名的function等同于ajax的回调函数
                    console.log("查询结果集：");
                    console.log(res.data);
                    // 更新data中的数据，并同步到view页面进行显示
                    _this.queryList = res.data;
                }).catch(err =>{
                    alert('发生了异常');
                })
            }
        }
    });

    var vue2 = new Vue({
        el: "#app2",
        data: {},
        methods: {}
    });
</script>
</body>
</html>